<template>
	<view class="content">
		<!-- 搜索框 -->
		<view class="header">
			<u-search shape="square" bgColor="#fff" class="input" actionText=""></u-search>
		</view>
		<!-- 轮播图 -->
		<view class="scroll">
			<swiper class="swiper" circular autoplay :interval="2000">
				<block v-for="(item,index) in scroll" :key="index">
					<swiper-item>
						<view class="scroll-img">
							<image :src="item.src"></image>
						</view>
					</swiper-item>
				</block>
			</swiper>
		</view>
		<!-- 横向滑动 -->
		<view class="slider">
			<u-scroll-list class="sliderSlist">
				<block v-for="(item,index) in slider" :key="index">
					<view>
						<image :src="item.src"></image>
					</view>
				</block>
			</u-scroll-list>
		</view>
		<!-- 九宫格 -->
		<view class="nine">
			<ul>
				<li v-for="(item,index) in nine" :key="index">
					<img :src="item.src" alt="">
					<p>{{item.txt}}</p>
				</li>
			</ul>
		</view>
		<view class="tabs">
			 <u-tabs :list="tabs" @click="click" class="tabs-list"></u-tabs>
		</view>
		<!-- 列表布局 -->
		<view class="list">
			<ul class="box">
				<li v-for="(item,index) in list" :key="index">
					<img :src="item.src" alt="">
					<p class="text">{{item.text}}</p>
					<div>
						<span class="price">{{item.txt}}</span>
						<span class="add">+</span>
					</div>
				</li>
			</ul>
		</view>
	</view>
</template>

<script>
	import axios from "axios"
	export default {
		data() {
			return {
				// 轮播图
				"scroll":[
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner7.f187995a.jpg"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner5.fb21a19b.jpg"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner8.2b15b757.jpg"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner6.3b281aa3.jpg"},
				],
				// 横向滑动
				"slider":[
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner8.2b15b757.jpg"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner6.3b281aa3.jpg"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner5.fb21a19b.jpg"}
				],
				// 九宫格
				"nine":[
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner7.f187995a.jpg",txt:"链猫精品"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner6.3b281aa3.jpg",txt:"CM专区"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner5.fb21a19b.jpg",txt:"领CM币"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner6.3b281aa3.jpg",txt:"领券"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/banner5.fb21a19b.jpg",txt:"链猫会员"}
				],
				"tabs":[
					{name:"精选"},
					{name:"时尚"},
					{name:"数码"},
					{name:"超市"},
					{name:"生活"}
				],
				// 列表布局
				"list":[
					{src:"http://gankai.gitee.io/vue-jd-h5/img/%E6%B0%B4%E6%9D%AF0.c4ca131f.png",text:"限量套装，新品上市",txt:"0.5倍算"},
					{src:"http://img13.360buyimg.com/focus/s140x140_jfs/t11071/195/2462134264/9117/cd0688bf/5a17ba79N18b9f3d4.png",text:"限量套装，新品上市",txt:"1.3倍算"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/%E7%94%B7%E9%9E%8B1.b7e6bce5.png",txt:"1.9倍算"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/%E7%BE%8E%E5%A6%86-1.50658bbb.png",text:"限量套装，新品上市",txt:"2.7倍算"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/test1.6e3dda02.png",text:"限量套装，新品上市",txt:"1.6倍算"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/%E7%BE%8E%E5%A6%86-7.77251686.png	",text:"限量套装，新品上市",txt:"2.3倍算"},
					{src:"http://gankai.gitee.io/vue-jd-h5/img/%E6%B0%B4%E6%9D%AF0.c4ca131f.png",text:"限量套装，新品上市",txt:"0.5倍算"},
					{src:"http://img13.360buyimg.com/focus/s140x140_jfs/t11071/195/2462134264/9117/cd0688bf/5a17ba79N18b9f3d4.png",text:"限量套装，新品上市",txt:"1.3倍算"},
				]
			}
		},
		onLoad() {

		},
		methods: {
			click(item) {
		        console.log('item', item);
		    }	
		}
	}
</script>

<style>
	*{
		margin: 0;
		padding: 0;
	}
	.content{
		width: 100%;
		background-color: #efeff4;
	}
	.header{
		padding-top: 20rpx;
		padding-left: 40rpx;
		width: 100%;
		position: absolute;
		z-index: 99;
	}
	.swiper{
		width: 100%;
		height: 455rpx;
	}
	.swiper image{
		width: 100%;
	}
	.slider{
		width: 100%;
		margin-top: 40rpx;
	}
	.slider view{
		margin-left: 10rpx;
		margin-right: 20rpx;
	}
	.slider image{
		height: 300rpx;
		width: 480rpx;
	}
	.tabs{
		margin-left: 70px;
	}
	.nine{
		width: 100;
	}
	.nine ul,li{
		list-style: none;
	}
	.nine ul{
		display: flex;
		justify-content: space-around;
	}
	.nine ul li{
		width: 16%;
	}
	.nine ul li img{
		width: 100%;
		border-radius: 50% 50%;
	}
	.nine ul li p{
		font-size: 14rpx;
		text-align: center;
		padding-bottom: 10rpx;
	}
	.list{
		width: 100%;
		margin-top: 20rpx;
	}
	.list .box{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.box li{
		width: 46%;
		background: #fff;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
	}
	.box li:nth-child(even){
		margin-right: 20rpx;
	}
	.box li img{
		width:100%;
		height: 200px;
	}
	.box li .text{
		color: #949497;
		font-size: 14rpx;
		margin-left: 40rpx;
		marign-top:20rpx;
	}
	.box li .price{
		display: inline-block;
		width: 100rpx;
		text-align: center;
		color:#fff;
		background: #D8182D;
		border-radius: 20rpx;
		font-size: 14rpx;
		margin-left: 40rpx;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}
	.box li .add{
		display: inline-block;
		font-size: 20px;
		color: #fff;
		background-color: #D8182D;
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 50rpx;
		margin-left: 140rpx;
	}
</style>
